<template>
  <div id="contentRight">
    <section id="sec1">
      <p class="guide">
        <router-link to="/">账户安全&nbsp;&nbsp;>&nbsp;</router-link>
        <span>实名认证</span>
      </p>
      <div class="d2">
        <label for="input1">
          <input type="radio" value="0" name="verifiType" id="input1" v-model="relNameType">
          <span>大陆(个人)</span>
        </label>
        <label for="input2">
          <input type="radio" value="1" name="verifiType" id="input2" v-model="relNameType">
          <span>海外(个人)</span>
        </label>
        <label for="input3">
          <input type="radio" value="2" name="verifiType" id="input3" v-model="relNameType">
          <span>企业账户</span>
        </label>
      </div>
      <div class="land menu" v-show="relNameType == 0">
        <p class="title">证件类型</p>
        <div class="value">
          <el-select v-model="land.selCardType" disabled placeholder="请选择证件类型" class="selectType">
            <el-option
              v-for="item in land.cardArr" :key="item.value" :label="item.name" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <p class="title">真实姓名</p>
        <div class="value">
          <input type="text" v-model="land.name">
        </div>
        <p class="title">证件号码</p>
        <div class="value">
          <input type="text" v-model="land.cardNum">
        </div>
        <p class="title uploadTitle">上传证件</p>
        <p class="uploadNotice">
          <span>拍摄证件照时，请保持和人像脸部的清晰</span>
          <span>仅支持JPG,GIF,PNG格式图片，且文件小于<span style="color: #E14343">2M</span></span>
        </p>
        <div class="upload">
          <label for="landinput1">
            <upload-image curId="landinput1" curRef="inputRef1" @inputChange="fileChange"/>
            <img :src="land.cardTopSrc" alt="">
          </label>
          <label for="landinput2">
            <upload-image curId="landinput2" curRef="inputRef2" @inputChange="fileChange"/>
            <img :src="land.cardBottomSrc"  alt="">
          </label>
        </div>
        <div class="d5">
          <span>身份证正面</span>
          <span>身份证反面</span>
        </div>
      </div>
      <div class="foreign menu" v-show="relNameType == 1">
        <p class="title">证件类型</p>
        <div class="value">
          <el-select v-model="foreign.selCardType"  placeholder="请选择证件类型" class="selectType">
            <el-option
              v-for="item in foreign.cardArr" :key="item.value" :label="item.name" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <p class="title">英文全名</p>
        <div class="value">
          <input type="text" v-model="foreign.en_name">
        </div>
        <p class="title">提现银行卡开户名</p>
        <div class="value">
          <input type="text" v-model="foreign.bankCardUserName">
        </div>
        <p class="title">证件号</p>
        <div class="value">
          <input type="text" v-model="foreign.cardNum">
        </div>
        <p class="title uploadTitle">上传证件</p>
        <p class="uploadNotice">
          <span>仅支持JPG,GIF,PNG格式图片，且文件小于<span style="color: #E14343">2M</span></span>
        </p>
        <div class="upload">
          <label for="landinput3">
            <upload-image curId="landinput3" curRef="inputRef3" @inputChange="fileChange"/>
            <img :src="foreign.cardTopSrc" alt="">
          </label>
        </div>
      </div>
      <div class="enterprise menu" v-show="relNameType == 2">
        <p class="title">证件类型</p>
        <div class="value">
          <el-select v-model="enterprise.selCardType" disabled placeholder="请选择证件类型" class="selectType">
            <el-option
              v-for="item in enterprise.cardArr" :key="item.value" :label="item.name" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <p class="title">企业名称</p>
        <div class="value">
          <input type="text" v-model="enterprise.name">
        </div>
        <p class="title">统一社会信用代码</p>
        <div class="value">
          <input type="text" v-model="enterprise.enterpriseCode">
        </div>
        <p class="title uploadTitle">上传证件</p>
        <p class="uploadNotice">
          <span>仅支持JPG,GIF,PNG格式图片，且文件小于<span style="color: #E14343">2M</span></span>
        </p>
        <div class="upload">
          <label for="lenterpriseinput">
            <upload-image curId="lenterpriseinput" curRef="lenterpriseinput" @inputChange="fileChange"/>
            <img :src="enterprise.cardTopSrc" alt="">
          </label>
        </div>
      </div>
      <p class="submit">
        <button @click="sub()">提交</button>
      </p>
      <div class="foreignReminder" v-if="relNameType == 1">
        温馨提示：<br>
        1.提现银行卡开户名，必须填写本人姓名<br>
        2.所填信息必须和证件上保持一致<br>
      </div>
    </section>
  </div>
</template>
<script>
  import { relNameVerify , file  } from '../http/api';
  export default {
    name :'relNameVerification',
    data() {
      return{
        relNameType : '0', //实名证件类型
        land : {
          //大陆
          selCardType : 0,
          cardArr  : [{ value : 0 , name : '身份证'}],
          name : null,//姓名
          cardNum : null, //证件号
          cardBottom : null, //input file 证件照正面
          cardTop : null,  //input file 证件照背面
          cardBottomSrc : require('../common/imgs/cardtop.png'),//图片src
          cardTopSrc : require('../common/imgs/cardbottom.png'),//图片src
        },
        foreign : {
          //海外
          selCardType : 0,
          cardArr  : [{ value : 0 , name : '护照'} , { value : 1 , name : '台胞证'}],
          // name : null,//姓名
          en_name : null,//英文名
          bankCardUserName : null,//提现银行卡用户名
          cardNum : null, //证件号
          cardTop : null, //input file 证件照正面
          cardTopSrc : require('../common/imgs/foreign.png'),//图片src
        },
        enterprise : {
          selCardType : 0,
          cardArr  : [{ value : 0 , name : '企业营业执照'}],
          name : null,//姓名
          enterpriseCode : null,//统一社会信用代码
          cardTop : null, //input file 证件照正面
          cardTopSrc : require('../common/imgs/enterprise.png'),//图片src
        }
      }
    },
    components:{
      ElSelect :  require('element-ui').Select, /*select*/
      ElOption : require('element-ui').Option, /*Option*/
      UploadImage : resolve => { require(['../components/UploadImage'], resolve) }, /*图片上传*/
    },
    mounted() {

    },
    methods:{
      fileChange(res){
        let ref = res.inputRef;
        let inputFile = res.inputFile;
        let base64Img = res.base64Img;
        let formData = new FormData();
        formData.append('img', inputFile);
        file(formData).then( res => {
          if(res.code == 200){
            let url = res.data.files.url;
            switch (ref) {
              case 'inputRef1':
                this.land.cardTop = url;
                this.land.cardTopSrc = base64Img;
                // this.postFile(res);
                break;
              case 'inputRef2':
                this.land.cardBottom = url;
                this.land.cardBottomSrc = base64Img;
                break;
              case 'inputRef3':
                this.foreign.cardTop = url;
                this.foreign.cardTopSrc = base64Img;
                break;
              case 'lenterpriseinput':
                this.enterprise.cardTop = url;
                this.enterprise.cardTopSrc = base64Img;
                break;
            }
          }
        });
      },
      landPostVerfily(){
        //大陆校验
        let land = this.land;
        let params = {
          name: land.name,
          type : 1,
          id_num: land.cardNum,
          id_photo_1: land.cardTop,
          id_photo_2: land.cardBottom
        };
        let info = null;
        if(!land.name){
          info = '请输入姓名';
        }else if(!land.cardNum){
          info = '请输入证件号';
        }else if(!land.cardTop){
          info = '请上传证件照正面';
        }else if(!land.cardBottom){
          info = '请上传证件照反面';
        }
        if(info){
          require('../common/js/toast').toast(info);
          return;
        }
        relNameVerify(params).then(res => {
          if (res.code == 200) {
            require('../common/js/toast').toast('实名审核提交成功');
            this.$router.replace({path : '/verificationResult'});
          }else{
            require('../common/js/toast').toast(res.message);
          }
        });
      },
      foreignVerfily(){
        //海外提交
        let foreign = this.foreign;
        let params = {
          name : foreign.bankCardUserName,
          en_name : foreign.en_name,
          id_num : foreign.cardNum,
          id_photo_1: foreign.cardTop,
          type : 2
        };
        let info = null;
        if(!foreign.bankCardUserName){
          info = '请输入姓名';
        }else if(!foreign.en_name){
          info = '请输入英文全名';
        }else if(!foreign.cardTop){
          info = '请上传证件照';
        }else if(!foreign.cardNum){
          info = '请输入证件号';
        }
        if(info){
          require('../common/js/toast').toast(info);
          return;
        }
        relNameVerify(params).then(res => {
          if (res.code == 200) {
            require('../common/js/toast').toast('实名审核提交成功');
            this.$router.replace({path: '/verificationResult'});
          }else{
            require('../common/js/toast').toast(res.message);
          }
        })
      },
      enterpriseVerfily(){
        //企业提交
        let enterprise = this.enterprise;
        let params = {
          name: enterprise.name,
          id_num: enterprise.enterpriseCode,
          id_photo_1: enterprise.cardTop,
          type : 5
        };
        let info = null;
        if(!enterprise.name){
          info = '请输入企业名称';
        }else if(!enterprise.enterpriseCode){
          info = '请输入统一社会信用代码';
        }else if(!enterprise.cardTop){
          info = '请上传企业证件照';
        }
        if(info){
          require('../common/js/toast').toast(info);
          return;
        }
        relNameVerify(params).then(res => {
          if (res.code == 200) {
            require('../common/js/toast').toast('实名审核提交成功');
            this.$router.replace({path: '/verificationResult'});
          }else{
            require('../common/js/toast').toast(res.message);
          }
        })
      },
      sub(){
        let relNameType = Number( this.relNameType );
        switch (relNameType) {
          case 0 :
            this.landPostVerfily();
            break;
          case 1 :
            this.foreignVerfily();
            break;
          case 2 :
            this.enterpriseVerfily();
            break;
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #sec1{
    min-height: 725px;padding-bottom: 130px;
    >.d2{
      overflow: hidden;padding-top:41px;
      >label{
        display: inline-block;float: left;margin-left: 83px;
        &:first-child{
          margin-left: 0;
        }
        .radioLabel;
        >span{
          color: #666;
          &:before{
            border-color: #999999;
          }
        }
      }
    }
    >.menu{
      >.title{
        color: #999;font-size: 14px;padding-top: 26px;
        &:first-child{
          padding-top: 36px;
        }
        &.uploadTitle{
          padding-top: 35px;
        }
      }
      >.value{
        padding-top: 13px;
        >input{
          .input;width: 371px;height: 38px;padding: 0 9px;font-size: 14px;border-color: #E5E5E5;
        }
        > .selectType{
          width: 371px;
          /deep/ input{
            width: 100%;font-size: 14px;color: #262626;
          }
          /deep/ input::-moz-placeholder{
            font-size: 12px;
          }
          /deep/ input:-ms-input-placeholder{
            font-size: 12px;
          }
          /deep/ input::-webkit-input-placeholder{
            font-size: 12px;
          }
        }
      }
      >.uploadNotice{
        padding-top: 22px;
        >span{
          color: #999;font-size: 12px;width: 264px;display: inline-block;
          &:nth-child(2){
            padding-left: 21px;width: auto;
          }
          >span{
            display: contents;
          }
        }
      }
      >.upload{
        padding-top: 24px;overflow: hidden;
        >label{
          width: 264px;height: 150px;position: relative;float: left;display: block;
          &:hover{
            cursor: pointer;
          }
          &:nth-child(2){
            margin-left: 21px;
          }
          >img{
            width: 100%;height: 100%;
          }
          >input{
            position: absolute;z-index: 1;left: 0;top:0;opacity: 0;width:0;height: 0;overflow: hidden;
          }
        }
      }
      >.d5{
        overflow: hidden;padding-top: 21px;
        >span{
          color: #262626;font-size: 14px;width: 264px;text-align: center;display: inline-block;
          &:nth-child(2){
            margin-left: 21px;
          }
        }
      }
      &.foreign> .upload > label{
        width: 264px;height: 186px;
      }
      &.enterprise> .upload > label{
        width: 264px;height: 186px;
      }
    }
    >.submit{
      padding-top: 40px;
      button{
       .submit; width: 160px;height: 38px;line-height: 38px;font-size: 14px;
      }
    }
    >.foreignReminder{
      color: #E15656;font-size: 14px;line-height: 170%;padding-top: 17px;
    }
  }
</style>
